@import '../variables';

@mixin starability-base($bg-image-path: 'icons') {
  display: block;
  position: relative;
  width: $star-count * $star-size;
  min-height: 2 * $star-size;
  padding: 0;
  border: none;

  > input {
    position: absolute;
    margin-right: -100%;
    opacity: 0;
  }

  > input:checked ~ label,
  > input:focus ~ label {
    background-position: 0 (-$star-size);
  }

  @if ($hover-enabled) {
    > input:hover ~ label {
      background-position: 0 (-$star-size);
    }
  }

  @if ($accessible-highlight) {
    > input:focus + label {
      outline: 1px dotted #999;
    }
  }

  > label {
    position: relative;
    display: inline-block;
    float: right;
    width: $star-size;
    height: $star-size;
    color: transparent;
    cursor: pointer;
    background-image: url('../starability-images/#{$bg-image-path}.png');
    background-repeat: no-repeat;

    @media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      background-image: url('../starability-images/#{$bg-image-path}@2x.png');
      background-size: $star-size auto;
    }
  }
}

@mixin starability-animation-base($bg-image-path: 'icons') {
  display: none;
  position: absolute;
  content: ' ';
  width: $star-size;
  height:  $star-size;
  background-image: url('../starability-images/#{$bg-image-path}.png');
  background-repeat: no-repeat;

  @media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    background-image: url('../starability-images/#{$bg-image-path}@2x.png');
    background-size: $star-size auto;
  }
}